<template>
  <transition name="alert-slide">
    <div id="alert" v-if="alertShow && alertOptions.style">
      <div class="content" :class="alertOptions.style">{{alertOptions.content}}</div>
      <span class="close iconfont icon-close" @click="closeAlert"></span>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  import {mapGetters, mapActions} from 'vuex'

  export default {
    computed: {
      ...mapGetters([
        'alertShow',
        'alertOptions'
      ])
    },
    methods: {
      closeAlert() {
        this.closeAlert()
      },
      ...mapActions([
        'closeAlert'
      ])
    },
    watch: {
      alertOptions(val) {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        if (val.timer) {
          this.timer = setTimeout(() => {
            this.closeAlert()
          }, val.timer)
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~common/scss/const";

  #alert {
    position: fixed;
    bottom: 50px;
    text-align: center;
    z-index: 9999;
    margin-left: 50%;
    transform: translate3d(-50%,0,0);
    &.alert-slide-enter-active,&.alert-slide-leave-active{
      transition: all .5s;
    }
    &.alert-slide-enter,&.alert-slide-leave-to{
      opacity: 0;
      bottom: 0;
      transform: translate3d(-50%,100%,0);
    }
    .content {
      padding: 10px 25px;
      color: $color-text-w;
      box-shadow: 0 0 5px $color-background-l;
      font-size: $font-size-medium;
      line-height: 1.2;
      box-sizing: border-box;
      &.success {
        background-color: #78BA32;
      }
      &.warning {
        background-color: #f60;
      }
      &.error {
        background-color: #df0000;
      }
      &.info {
        background-color: #39f;
      }
    }
    .close {
      color: $color-text-w;
      cursor: pointer;
      position: absolute;
      right: 0px;
      top: 0px;
      font-size: $font-size-small-s;
      padding: 2px 2px 5px 5px;
    }
  }
</style>
